body{
    overflow: hidden;font-family: "微软雅黑";
    --borderColor:#dee2e6;
    --white: #fff;
    --f2:#f2f2f2;
    --333:#333;
    --555:#555;
    --555:#555;
    --666:#666;
    --777:#777;
    --888:#888;
    --999:#999;
}

img{border: 0;border: 0 \0;}
/* 阴影 */
.shadow-sm {box-shadow: 0 1px 2px rgba(114, 130, 138, 0.2)!important;}
.shadow {box-shadow: 4px 8px rgba(114, 130, 138, 0.2)!important;}
.shadow-lg { box-shadow: 0 16px 24px rgba(114, 130, 138, 0.2)!important;}
/* 全阴影 */
.showdow-full{box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)!important;}

/* 文字 */
.t-center{text-align: center;}
.t-left{text-align: left;}
.t-right{text-align: right;}

/* 定位 */
.p-absolute{ position: absolute; }
.p-fixed{ position: fixed; }
.p-relative{ position: relative; }
.left-0{ left: 0; }
.top-0{ top: 0; }
.bottom-0{ bottom: 0; }
.right-0{ right: 0; }
/* 居中定位 */
.p-absolute-center{position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);z-index: 101;}
.p-fixed-center{position: fixed;left:50%;top:50%;transform: translate(-50%,-50%);z-index: 101;}

/* 背景颜色color */
.bg-primary{ background-color:var(--primary)!important; }
.bg-secondary{ background-color:var(--secondary)!important; }
.bg-success{ background-color:var(--success)!important; }
.bg-danger{ background-color: var(--danger)!important; }
.bg-warning{ background-color:var(--warning)!important; }
.bg-info{ background-color: var(--info)!important; }
.bg-light{ background-color: var(--light)!important; }
.bg-dark{ background-color: var(--dark)!important; }
.bg-white{ background-color: var(--white)!important; }
.bg-light-secondary{background-color: #F1F1F1!important;}
.bg-555{background-color:var(--555)!important;}

/* 宽高 */
.w-20{ width: 20%!important;}
.w-25{ width: 25%!important;}
.w-30{ width: 30%!important;}
.w-35{ width: 35%!important;}
.w-40{ width: 40%!important;}
.w-45{ width: 45%!important;}
.w-50{ width: 50%!important;}
.w-55{ width: 55%!important;}
.w-60{ width: 60%!important;}
.w-65{ width: 65%!important;}
.w-70{ width: 70%!important;}
.w-75{ width: 75%!important;}
.w-80{ width: 80%!important;}
.w-85{ width: 85%!important;}
.w-90{ width: 90%!important;}
.w-95{ width: 95%!important;}
.w-100{ width: 100%!important;}
.h-20{ height: 20%!important;}
.h-25{ height: 25%!important;}
.h-30{ height: 30%!important;}
.h-35{ height: 35%!important;}
.h-40{ height: 40%!important;}
.h-45{ height: 45%!important;}
.h-50{ height: 50%!important;}
.h-55{ height: 55%!important;}
.h-60{ height: 60%!important;}
.h-65{ height: 65%!important;}
.h-70{ height: 70%!important;}
.h-75{ height: 75%!important;}
.h-80{ height: 80%!important;}
.h-85{ height: 85%!important;}
.h-90{ height: 90%!important;}
.h-95{ height: 95%!important;}
.h-100{ height: 100%!important;}

/* 字体 */
.font-12{ font-size: 12px!important; }
.font-14{ font-size: 14px!important; }
.font-16{ font-size: 16px!important; }
.font-18{ font-size: 18px!important; }
.font-20{ font-size: 20px!important; }
.font-22{ font-size: 22px!important; }
.font-24{ font-size: 24px!important; }
.font-26{ font-size: 26px!important; }
.font-28{ font-size: 28px!important; }
.font-30{ font-size: 30px!important; }
.font-32{ font-size: 32px!important; }

.text-white{ color: var(--white)!important; }
.text-333{ color:var(--333)!important; }
.text-555{ color:var(--555)!important; }
.text-666{ color:var(--666)!important; }
.text-777{ color:var(--777)!important; }
.text-888{ color:var(--888)!important; }
.text-999{ color:var(--999)!important; }
.text-f2{ color:var(--f2)!important; }

/* 背景颜色 */
.bg-f2{ background-color:var(--f2)!important; }

/* 粗细 */
.font-w100{ font-weight: 100!important;}
.font-w200{ font-weight: 200!important;}
.font-w300{ font-weight: 300!important;}
.font-w400{ font-weight: 400!important;}
.font-w500{ font-weight: 500!important;}
.font-w600{ font-weight: 600!important;}
.font-w{ font-weight: bold!important; }

/* 外边距 */
.m-0 { margin-left: 0;margin-right: 0;margin-top: 0;margin-bottom: 0;}
.m-5 { margin-left: 5px;margin-right: 5px;margin-top: 5px;margin-bottom: 5px;}
.m-10 { margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;}
.m-15 { margin-left: 15px;margin-right: 15px;margin-top: 15px;margin-bottom: 15px;}
.m-20 { margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px;}
.m-25 { margin-left: 25px;margin-right: 25px;margin-top: 25px;margin-bottom: 25px;}
.m-30 { margin-left: 30px;margin-right: 30px;margin-top: 30px;margin-bottom: 30px;}

.mx-0 { margin-left: 0;margin-right: 0;}
.mx-5 { margin-left: 5px;margin-right: 5px;}
.mx-10 { margin-left: 10px;margin-right: 10px;}
.mx-15 { margin-left: 15px;margin-right: 15px;}
.mx-20 { margin-left: 20px;margin-right: 20px;}
.mx-25 { margin-left: 25px;margin-right: 25px;}
.mx-30 { margin-left: 30px;margin-right: 30px;}
.mx-auto{margin-left: auto;margin-right: auto;}

.my-0 { margin-top: 0;margin-bottom: 0;}
.my-5 { margin-top: 5px;margin-bottom: 5px;}
.my-10 { margin-top: 10px;margin-bottom: 10px;}
.my-15 { margin-top: 15px;margin-bottom: 15px;}
.my-20 { margin-top: 20px;margin-bottom: 20px;}
.my-25 { margin-top: 25px;margin-bottom: 25px;}
.my-30 { margin-top: 30px;margin-bottom: 30px;}

.mt-0 { margin-top: 0;}
.mt-5 { margin-top: 5px;}
.mt-10 { margin-top: 10px;}
.mt-15 { margin-top: 15px;}
.mt-20 { margin-top: 20px;}
.mt-25 { margin-top: 25px;}
.mt-30 { margin-top: 30px;}
.mt-auto { margin-top: auto;}

.mb-0 { margin-bottom: 0;}
.mb-5 { margin-bottom: 5px;}
.mb-10 { margin-bottom: 10px;}
.mb-15 { margin-bottom: 15px;}
.mb-20 { margin-bottom: 20px;}
.mb-25 { margin-bottom: 25px;}
.mb-30 { margin-bottom: 30px;}
.mb-auto { margin-bottom: auto;}

.ml-0 { margin-left: 0;}
.ml-5 { margin-left: 5px;}
.ml-10 { margin-left: 10px;}
.ml-15 { margin-left: 15px;}
.ml-20 { margin-left: 20px;}
.ml-25 { margin-left: 25px;}
.ml-30 { margin-left: 30px;}
.ml-auto { margin-left: auto;}

.mr-0 { margin-right: 0;}
.mr-5 { margin-right: 5px;}
.mr-10 { margin-right: 10px;}
.mr-15 { margin-right: 15px;}
.mr-20 { margin-right: 20px;}
.mr-25 { margin-right: 25px;}
.mr-30 { margin-right: 30px;}
.mr-auto { margin-right: auto;}

/*  内边距 */
.p-0 { padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}
.p-5 { padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;}
.p-10 { padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;}
.p-15 { padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;}
.p-20 { padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}
.p-25 { padding-left: 25px;padding-right: 25px;padding-top: 25px;padding-bottom: 25px;}
.p-30 { padding-left: 30px;padding-right: 30px;padding-top: 30px;padding-bottom: 30px;}

.px-0 { padding-left: 0;padding-right: 0;}
.px-5 { padding-left: 5px;padding-right: 5px;}
.px-10 { padding-left: 10px;padding-right: 10px;}
.px-15 { padding-left: 15px;padding-right: 15px;}
.px-20 { padding-left: 20px;padding-right: 20px;}
.px-25 { padding-left: 25px;padding-right: 25px;}
.px-30 { padding-left: 30px;padding-right: 30px;}
.px-auto{padding-left: auto;padding-right: auto;}

.py-0 { padding-top: 0;padding-bottom: 0;}
.py-5 { padding-top: 5px;padding-bottom: 5px;}
.py-10 { padding-top: 10px;padding-bottom: 10px;}
.py-15 { padding-top: 15px;padding-bottom: 15px;}
.py-20 { padding-top: 20px;padding-bottom: 20px;}
.py-25 { padding-top: 25px;padding-bottom: 25px;}
.py-30 { padding-top: 30px;padding-bottom: 30px;}

.pt-0 { padding-top: 0;}
.pt-5 { padding-top: 5px;}
.pt-10 { padding-top: 10px;}
.pt-15 { padding-top: 15px;}
.pt-20 { padding-top: 20px;}
.pt-25 { padding-top: 25px;}
.pt-30 { padding-top: 30px;}
.pt-auto { padding-top: auto;}

.pb-0 { padding-bottom: 0;}
.pb-5 { padding-bottom: 5px;}
.pb-10 { padding-bottom: 10px;}
.pb-15 { padding-bottom: 15px;}
.pb-20 { padding-bottom: 20px;}
.pb-25 { padding-bottom: 25px;}
.pb-30 { padding-bottom: 30px;}
.pb-auto { padding-bottom: auto;}

.pl-0 { padding-left: 0;}
.pl-5 { padding-left: 5px;}
.pl-10 { padding-left: 10px;}
.pl-15 { padding-left: 15px;}
.pl-20 { padding-left: 20px;}
.pl-25 { padding-left: 25px;}
.pl-30 { padding-left: 30px;}
.pl-auto { padding-left: auto;}

.pr-0 { padding-right: 0;}
.pr-5 { padding-right: 5px;}
.pr-10 { padding-right: 10px;}
.pr-15 { padding-right: 15px;}
.pr-20 { padding-right: 20px;}
.pr-25 { padding-right: 25px;}
.pr-30 { padding-right: 30px;}
.pr-auto { padding-right: auto;}

/* flex */
.row { box-sizing: border-box!important; display: flex!important; flex-direction: row!important; flex-wrap: wrap!important;}
.d-flex{ display: flex; }
.d-block{ display: block; }
.d-inline-block{ display: inline-block; }
.d-none{ display: none; }

.flex-1{ flex: 1; }
.flex-column{ flex-direction: column; }
.flex-row{ flex-direction: row; }
.flex-wrap{ flex-wrap: wrap; }
.flex-nowrap{ flex-wrap: nowrap; }
.flex-shrink{flex-shrink: 0;}
.j-start{ justify-content: flex-start; }
.j-center{ justify-content: center; }
.j-end{ justify-content: flex-end; }
.j-sb{ justify-content: space-between; }
.a-center{ align-items:center; }
.a-start{ align-items: flex-start; }
.a-end{ align-items:flex-end; }
.a-stretch{ align-items: stretch; }
.a-self-start{ align-self: flex-start; }
.a-self-auto{ align-self: auto; }
.a-self-end{ align-self: flex-end; }
.a-self-stretch{ align-self:stretch; }
.a-self-baseline{ align-self:baseline; }

/* 边框Border */
.border{  border-width: 1px; border-style: solid; border-color: var(--borderColor);}
.border-top{ border-top-width: 1px; border-top-style: solid; border-top-color: var(--borderColor); }
.border-right{ border-right-width: 1px; border-right-style: solid; border-right-color: var(--borderColor);}
.border-bottom{ border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color:var(--borderColor);}
.border-left{ border-left-width: 1px;border-left-style: solid;border-left-color:var(--borderColor);}
/* 取消border */
.border-none{border:none!important;}

/* 圆角 */
.radius-0{ border-radius:0; }
.radius-10{ border-radius: 10px; }
.radius-20{ border-radius: 20px; }
.radius-30{ border-radius: 30px; }
.radius-40{ border-radius: 40px; }
.radius-50{ border-radius: 50px; }
.radius-100{ border-radius:100%; }

/* 圆角方向 */
.radius-t10{border-radius: 5px 5px 0 0!important; }
.radius-b10{border-radius:  0 0 5px 5px!important; }

/* 盒子模型 */
.border-box{box-sizing:border-box;}
